// 动态详细组件页面
import { StyleSheet, Text, View, Image, TouchableHighlight } from 'react-native'
import React, { useState } from 'react'
import Storage from '../constants/storage'
import Icon from 'react-native-vector-icons/FontAwesome'
import EntypoIcon from 'react-native-vector-icons/Entypo'

const DongTaiDetail = (props) => {

  const [item, setItem] = useState({})
  const { Id } = props
  Storage.load({
    key: 'dynamicStateDate'
  }).then(res => {
    setItem(res[Id - 1])
    // console.log('contentImg:', item.contentImg);
  }).catch(err => console.log('err:', err))
  return (
    <View style={styles.itemContainer}>
      {/* 顶部内容 */}
      <View style={styles.headerItem}>
        <View style={styles.imgText}>
          <Image source={item.uPhoto} style={styles.uPhoto} />
          <View >
            <Text style={styles.headerName}>{item.nickName}</Text>
            <Text style={styles.headerText}>{`${item.guanzhuCount}人关注`}</Text>
          </View>
        </View>
        <TouchableHighlight activeOpacity={0.5} underlayColor='#aaa' style={styles.touchG} onPress={() => { console.log('点击') }}>
          <Text style={styles.touchT}>关注</Text>
        </TouchableHighlight>
      </View>
      {/* 文章内容 */}
      <View>
        <Text style={styles.dtCountent}>{item.dtCountent}</Text>
      </View>
      {/* 文章图片 */}
      <View style={styles.ContainerContentImg}>
        <Image source={item.uPhoto} style={styles.contentImg}/>
      </View>
      {/* 点赞区域 */}
      <View style={styles.iconCount}>
        <View style={styles.zanCount}>
          <Text>2020/10/12</Text>
        </View>
        <EntypoIcon name='dots-three-horizontal' size={20} />
      </View>
    </View>
  )
}
DongTaiDetail.options = {
  topBar: {
    title: {
      text: '动态明细',
      color: 'red',
      alignment: 'center', // 标题居中
    },
    background:{
      color:'pink'
    },
    rightButtons: [
      {
        id: 'ShareCom',
        // text: 'anniu',
        // iconBackground: 'red',
        // fontStyle: 'italic',
        // icon: require('../assets/bottomTabs/dian.png'),
        
        component: {
          name: 'ShareCom',
          fontSize: 'BUtton'
        }
      }
    ]
  },
  statusBar: {
    // visible: false
  }

}
export default DongTaiDetail

const styles = StyleSheet.create({
  itemContainer: {
    paddingRight: 20,
    paddingLeft: 20,
    marginBottom: 10, backgroundColor: '#fff'
  },
  headerItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 10
  },
  imgText: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  uPhoto: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 10
  },
  headerName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000'
  },
  headerText: {
    fontSize: 14,
    color: '#999'
  },
  touchG: {
    width: 60,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#51ec7b',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  touchT: {
    color: '#fff',
    fontWeight: '600'
  },
  dtCountent: {
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 30,
    color: '#000'
  },
  ContainerContentImg: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  contentImg: {
    width: 100,
    height: 100,
    margin: 5
  },
  iconCount: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: '#eee',
    justifyContent: 'space-between',
    alignItems: 'center',
    // borderBottomWidth: 2,
    borderBottomColor: '#eee'
  },
  zanCount: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: 20,
    marginBottom: 20
  },
  iconText: {
    display: 'flex',
    flexDirection: 'row',
    marginRight: 20
  },
  iconZan: {
    marginRight: 10
  },
})